<!-- 翻牌器配置 -->
<template>
  <div style="margin-top:16px">
    <el-form-item label="精度">
      <el-input-number v-model="myConfig.decimals" controls-position="right" >
      </el-input-number>
    </el-form-item>
    <el-form-item label="行数">
      <el-input-number v-model="myConfig.span" controls-position="right" >
      </el-input-number>
    </el-form-item>
    <hr class="hr_color" style="margin-bottom: 2px" />
    <el-collapse accordion>
      <el-collapse-item title="边框设置">
        <el-form-item label="X间距" class="form_item_margin">
          <el-slider v-model="myConfig.splitx" class="slider_thin"></el-slider>
        </el-form-item>
        <el-form-item label="Y间距" class="form_item_margin">
          <el-slider v-model="myConfig.splity" class="slider_thin"></el-slider>
        </el-form-item>
        <!--<el-form-item label="边框宽度" v-if="main.activeObj.label == '颜色块'">
          <el-input-number v-model="myConfig.width" :max="1000" controls-position="right" >
          </el-input-number>
        </el-form-item>
        <el-form-item label="边框高度" v-if="main.activeObj.label == '颜色块'">
          <el-input-number v-model="myConfig.height" :max="1000" controls-position="right" >
          </el-input-number>
        </el-form-item>-->
        <el-form-item label="边框" v-if="main.activeObj.label != '颜色块'">
          <l-radio v-model="myConfig.type"
                      :options="dicOption.border">
          </l-radio>
        </el-form-item>
        <template v-if="myConfig.type==='border'" >
          <el-form-item label="边框颜色">
            <l-input-color v-model="myConfig.borderColor"></l-input-color>
          </el-form-item>
          <el-form-item label="边框宽度">
            <el-input-number v-model="myConfig.borderWidth" :max="10" controls-position="right" >
            </el-input-number>
          </el-form-item>
        </template>
        <template v-if="myConfig.type==='img'" >
          <el-form-item label="边框图片">
            <l-img-select v-model="myConfig.backgroundBorder" />
     </el-form-item>
   </template>
      </el-collapse-item>
      <el-collapse-item title="内部设置">
        <el-form-item :label="$t('字体')" class="form_item_margin">
          <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.color"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input v-model="myConfig.color" class="r_96width r_margin_right8">
          </el-input>
          <el-input
            v-model="myConfig.fontSize"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">px</span>
          </el-input>
        </el-form-item>
        <el-form-item label="文字粗细">
          <l-select
            v-model="myConfig.fontWeight"
            :options="dicOption.fontWeightOptions"
          >
          </l-select>
        </el-form-item>
        <el-form-item label="对其方式">
          <l-select v-model="myConfig.textAlign" :options="dicOption.textAlign">
          </l-select>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="前缀设置">
        <template v-if="!myConfig.whole">
          <el-form-item label="前缀内容">
            <el-input v-model="myConfig.prefixText"></el-input>
          </el-form-item>
        </template>
        <template v-if="!myConfig.row">
          <el-form-item label="对其方式">
            <l-select
              v-model="myConfig.prefixTextAlign"
              :options="dicOption.textAlign"
            >
            </l-select>
          </el-form-item>
        </template>
        <el-form-item label="X间距" class="form_item_margin">
          <el-slider
            v-model="myConfig.prefixSplitx"
            class="slider_thin"
          ></el-slider>
        </el-form-item>
        <el-form-item label="Y间距" class="form_item_margin">
          <el-slider
            v-model="myConfig.prefixSplity"
            class="slider_thin"
          ></el-slider>
        </el-form-item>
        <el-form-item :label="$t('字体')" class="form_item_margin">
          <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.prefixColor"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.prefixColor"
            class="r_96width r_margin_right8"
          >
          </el-input>
          <el-input
            v-model="myConfig.prefixFontSize"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">px</span>
          </el-input>
        </el-form-item>
      </el-collapse-item>
      <el-collapse-item title="后缀设置">
        <template v-if="!myConfig.whole">
          <el-form-item label="后缀内容">
            <el-input v-model="myConfig.suffixText"></el-input>
          </el-form-item>
        </template>
        <template v-if="!myConfig.row">
          <el-form-item label="对其方式">
            <l-select
              v-model="myConfig.suffixTextAlign"
              :options="dicOption.textAlign"
            >
            </l-select>
          </el-form-item>
        </template>
        <el-form-item label="X间距" class="form_item_margin">
          <el-slider
            v-model="myConfig.suffixSplitx"
            class="slider_thin"
          ></el-slider>
        </el-form-item>
        <el-form-item label="Y间距" class="form_item_margin">
          <el-slider
            v-model="myConfig.suffixSplity"
            class="slider_thin"
          ></el-slider>
        </el-form-item>
        <el-form-item :label="$t('字体')" class="form_item_margin">
          <span class="l_color_box r_margin_right8">
            <l-input-color
              v-model="myConfig.suffixColor"
              :notInput="true"
            ></l-input-color>
          </span>
          <el-input
            v-model="myConfig.suffixColor"
            class="r_96width r_margin_right8"
          >
          </el-input>
          <el-input
            v-model="myConfig.suffixFontSize"
            class="r_56width"
            oninput="value=value.replace(/[^\d]/g,'')"
          >
            <span slot="suffix" style="line-height: 32px">px</span>
          </el-input>
        </el-form-item>
      </el-collapse-item>
    </el-collapse>
  </div>
</template>

<script>
import { dicOption } from "../../mixins/config";
export default {
  data () {
    return {
      dicOption: dicOption
    }
  },
  inject: ["main"],
   props: {
    config: {
      type: Object,
      default: () => ({}),
    },
  },
  computed: {
    myConfig() {
      return this.config;
    },
  },
}
</script>

<style>
</style>